<template>
  <div class="wrapper">
      <div class="title">热销推荐</div>
      <ul>
          <li
              class="item"
              v-for="item of list"
              :key="item.id">
              <div class="img-wrapper">
                  <img class="item-img" :src="item.imgUrl" alt="">
              </div>
              <div class="item-info">
                <p class="item-title">{{item.title}}</p>
                <p class="item-desc">{{item.desc}}</p>
                <button class="item-button">查看详情</button>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
export default({
  name: 'HomeRecommend',
  props: {
    list: Array
  },
  data () {
    return {
      recommendList: [{
        id: '001',
        imgUrl: 'https://img1.qunarzz.com/sight/p0/1902/d4/d4abab5d2b8b3238a3.img.jpg_256x160_196d32fc.jpg',
        title: '大唐芙蓉园',
        desc: '在昔日皇家御苑中再现辉煌'
      }, {
        id: '002',
        imgUrl: 'https://img1.qunarzz.com/sight/p0/1902/d4/d4abab5d2b8b3238a3.img.jpg_256x160_196d32fc.jpg',
        title: '大唐芙蓉园',
        desc: '在昔日皇家御苑中再现辉煌'
      }]
    }
  }
})
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl';
.wrapper
  width: 100%
  .title
      line-height: .6rem
      background: #eee
      text-indent: .2rem
    .item
      overflow: hidden
      display: flex
      height: 1.9rem
      .item-img
        width: 2.4rem
        height: 1.7rem
        padding: .1rem
      .item-info
        flex: 1
        // 使内容不超过盒子
        min-width: 0
        padding: .1rem
        .item-title
          line-height: .54rem
          font-size:.32rem
        .item-desc
          line-height: .4rem
          color: #ccc
          ellipsis()
        .item-button
          margin-top: .2rem
          background: #ff9300
          padding: 0 .1rem
          border-radius: .06rem
          color: #fff
</style>
